<template>
	<view v-if="isLoding">
		<uv-navbar title="用户认证" leftIconColor="#fff" titleStyle="color: #fff" bgColor="#006BFE" :placeholder="true"
			@leftClick="leftClick"></uv-navbar>
		<uv-form labelPosition="left" labelWidth="120" :model="formData" :rules="rules" ref="form">
			<view :class="[formData.authStatus=='1' ? 'message_notext' : 'message']" v-if="formData.authStatus!=null">
				<view v-if="hadEdit">
					<image class="message-img" :src="`${$hd.baseUrl}/images/icon-update.png`" alt="" />
				</view>
				<view v-else-if="formData.authStatus=='0'">
					<view style="color: #006BFE">您的用户认证正在审核，请耐心等待！</view>
					<image class="message-img" :src="`${$hd.baseUrl}/images/img-review.png`" alt="" />
				</view>
				<view v-else-if="formData.authStatus=='1'">
					<image class="message-img" :src="`${$hd.baseUrl}/images/img-review-1.png`" alt="" />
				</view>
				<view v-else-if="formData.authStatus=='2'">
					<view style="color: #FE3A6A">{{formData.auditComments}}</view>
					<image class="message-img" :src="`${$hd.baseUrl}/images/img-review-2.png`" alt="" />
				</view>
			</view>
			<view>
				<view class="title">
					实名认证
				</view>
				<view style="background-color: white">
					<view class="bg-white padding-lr">
						<uv-form-item label="真实姓名" prop="flyerName" borderBottom>
							<uv-input v-model="formData.flyerName" border="none" @change="onChangeName">
							</uv-input>
						</uv-form-item>
					</view>
					<view class="bg-white padding-lr">
						<uv-form-item label="身份证号" prop="idCard" borderBottom style="width: 100%">
							<uv-input v-model="formData.idCard" border="none" @change="onChangeName">
							</uv-input>
						</uv-form-item>
					</view>
					<view class="bg-white padding-lr" style="height: 180px;">
						<uv-form-item style="width: 100%" label="身份正反面" prop="idCardFrontPath" :borderBottom="false"
							labelPosition="top">
							<view style="display: flex;justify-content: space-around;">
								<view class="margin-tb-sm">
									<ImageUpload key="action1" @deletePic="delPic(arguments,1)" :maxCount="1"
										uploadText="正面图片" v-model="formData.idCardFrontPath" @uploadEm="fetchIdNum">
										<view slot="img">
											<image :src="`${$hd.baseUrl}/images/img-front.png`" mode="widthFix"
												style="width: 150px;height: 50px;">
											</image>
										</view>
									</ImageUpload>
								</view>
								<view class="margin-left-xs margin-tb-sm">
									<ImageUpload key="action2" @deletePic="delPic(arguments,2)" :maxCount="1"
										uploadText="反面图片" v-model="formData.idCardBackPath">
										<view slot="img">
											<image :src="`${$hd.baseUrl}/images/img-back.png`" mode="widthFix"
												style="width: 150px;height: 50px;">
											</image>
										</view>
									</ImageUpload>
								</view>
							</view>
						</uv-form-item>
					</view>
				</view>
			</view>
			<view>
				<view class="title">
					飞手认证
				</view>
				<uv-action-sheet ref="sexSelect" :actions="actions" title="请选择执照类型" @select="sexSelect">
				</uv-action-sheet>
				<view style="background-color: white">
					<view class="bg-white padding-lr">
						<uv-form-item label="手机号码" prop="contact" borderBottom>
							<uv-input v-model="formData.contact" border="none" @change="onChangeName">
							</uv-input>
						</uv-form-item>
					</view>
					<view class="bg-white padding-lr">
						<uv-form-item label="执照类型" prop="licenseType" borderBottom @click="showSexSelect">
							<uv-input v-model="formData.licenseType" disabled border="none" disabledColor="#ffffff">
							</uv-input>
						</uv-form-item>
					</view>
					<view class="bg-white padding-lr">
						<uv-form-item label="执照编号" prop="licenseNo" borderBottom>
							<uv-input v-model="formData.licenseNo" border="none" @change="onChangeName">
							</uv-input>
						</uv-form-item>
					</view>
					<view class="bg-white padding-lr" style="height: 180px;">
						<uv-form-item style="width: 100%" label="执照照片" prop="licensePhotoPath" labelPosition="top">
							<view style="display: flex;justify-content: space-around;">
								<ImageUpload key="action3" @deletePic="delPic(arguments,3)" :maxCount="1"
									class="margin-tb-sm" uploadText="执照照片" v-model="formData.licensePhotoPath">
									<view slot="img">
										<image :src="`${$hd.baseUrl}/images/img-front.png`" mode="widthFix"
											style="width: 150px;height: 50px;">
										</image>
									</view>

								</ImageUpload>
							</view>
						</uv-form-item>
					</view>

				</view>
			</view>
			<view class="foot-box">
				<button @click="submit" class="cu-btn flex-sub" :class="theme == 'fs'? 'bg-main': 'bg-green'">
					<view v-if="formData.authStatus==null">
						提交
					</view>
					<view v-else-if="formData.authStatus==0 || formData.authStatus==2">
						修改
					</view>
					<view v-else>
						更新
					</view>
				</button>
			</view>
		</uv-form>

	</view>
</template>

<script>
	import ImageUpload from './components/imageUpload.vue'
	import {
		mapGetters
	} from 'vuex'
	export default {
		components: {
			ImageUpload
		},
		watch: {
			// formData: {
			//   handler(value) {
			//     console.log(value)
			//     if (value.idCardFrontPath !== '' || value.idCardBackPath !== '') {
			//       this.rules.idCardFrontPath.required = true;
			//       this.rules.idCardBackPath.required = true;
			//     } else {
			//       delete this.rules.idCardFrontPath.required;
			//       delete this.rules.idCardBackPath.required;
			//     }
			//   },
			//   deep: true
			// },
		},
		computed: {
			...mapGetters(['theme'])
		},
		data() {
			return {
				hadEdit: false,
				isLoding: false,
				uploadList: [],
				current: 0,
				formData: {
					"flyerId": '',
					"id": 0,
					"authStatus": 0,
					"flyerName": "",
					"idCard": "",
					"licenseNo": "",
					"licenseType": "",
					"idCardFrontPath": "",
					"idCardBackPath": "",
					"licensePhotoPath": "",
					"auditComments": "",
					"contact": ""
				},
				actions: [{
					name: 'A类',
				}, {
					name: 'B类',
				}, {
					name: 'C类',
				}, ],
				rules: {
					'flyerName': {
						type: 'string',
						required: true,
						message: '请填写真实姓名',
						trigger: ['blur', 'change']
					},
					'idCard': [{
							type: 'string',
							required: true,
							len: 18,
							message: '请填写正确的身份证号',
							trigger: ['blur']
						},
						{
							type: 'string',
							required: true,
							message: '请填写身份证号',
							trigger: ['blur', 'change']
						},
					],
					'licenseNo': {
						type: 'string',
						required: true,
						message: '请填写执照编号',
						trigger: ['blur', 'change']
					},
					'contact': [{
							type: 'string',
							required: true,
							len: 11,
							message: '请填写正确的手机号码',
							trigger: ['blur']
						},
						{
							type: 'string',
							required: true,
							message: '请填写手机号码',
							trigger: ['blur', 'change']
						},
					],
					'idCardFrontPath': {
						type: 'string',
						required: true,
						message: '请上传身份证正面',
						trigger: ['blur', 'change']
					},
					'idCardBackPath': {
						type: 'string',
						required: true,
						message: '请上传身份证反面',
						trigger: ['blur', 'change']
					},
					'licensePhotoPath': {
						type: 'string',
						required: true,
						message: '请上传执照照片',
						trigger: ['blur', 'change']
					},
					'licenseType': {
						type: 'string',
						required: true,
						message: '请选择执照类型',
						trigger: ['blur', 'change']
					}
				},
			};
		},
		onLoad() {
			this.$store.dispatch('user/setUserAction')
			this.getData();
		},
		methods: {
			onChangeName() {
				if (this.formData.id) this.hadEdit = true
			},
			leftClick() {
				console.log('leftClick')
				if (!this.hadEdit) {
					uni.navigateBack()
					return
				}
				const that = this
				uni.showModal({
					title: '信息已修改是否提交更新',
					message: '信息已修改是否提交更新',
					success: function(res) {
						if (res.confirm) {
							that.submit()
						} else if (res.cancel) {
							console.log('用户点击取消');
							// 然后返回
							uni.navigateBack()
						}
					}
				})
			},
			// 读取身份证信息
			fetchIdNum(path) {
				// 已经填写就 返回
				// if (this.formData.flyerName && this.formData.idCard) return
				uni.$uv.http.upload('/api/ocr/idcard', {
					filePath: path, // 要上传文件资源的路径。
					name: 'file'
				}).then(res => {
					if (res.name) this.formData.flyerName = res.name
					if (res.idCard) this.formData.idCard = res.idCard
				}).catch(err => {
					console.log('err', err)
				})
			},
			delPic(e, a) {
				this.onChangeName()
				if (a == 1) {
					this.formData.idCardFrontPath = "";
				}
				if (a == 2) {
					this.formData.idCardBackPath = "";
				}
				if (a == 3) {
					this.formData.licensePhotoPath = "";
				}
			},
			// 提交
			submit() {
				let _this = this;
				this.$refs.form.validate().then(res => {
					if (_this.formData.flyerId == null) {
						_this.formData.contact = uni.getStorageSync('userInfo').user.account;
						this.$http.post('/cadre/flyerAudit/add', {}, {
							data: this.formData
						}).then(res => {
							if (res.code != 200) {
								uni.showToast({
									icon: 'error',
									title: res.msg
								})
								return;
							}
							// uni.showToast({
							// 	icon: 'success',
							// 	title: '添加成功'
							// })
							uni.showModal({
								title: '提交成功，请等待管理员审核',
								showCancel: false
							})
							_this.getData();
						})
					} else {
						this.formData.authStatus = 0;
						this.$http.post('/cadre/flyerAudit/editInfoApp', {}, {
							data: this.formData
						}).then(res => {
							uni.showModal({
								title: '提交成功，请等待管理员审核',
								showCancel: false
							})
							_this.getData();
							this.hadEdit = false
						})
					}

				}).catch(errors => {
					uni.showToast({
						icon: 'error',
						title: '校验失败'
					})
				})

			},
			getData() {
				let _this = this;
				_this.$http.get('/cadre/flyerAudit/getInfoApp').then(res => {
					_this.formData = res.data;
					if (!_this.formData.contact) {
						_this.formData.contact = uni.getStorageSync('userInfo').user.account;
					}
					_this.isLoding = true;
				})
			},
			// async getData() {
			//   const _this=this;
			//   const user = await this.$hd.isLogin()
			//   // 测试检测未登录，跳转到登录页
			//   if (!user) {
			//     this.login()
			//   } else {
			//     // 当前用户信息
			//     _this.$http.get('/cadre/flyerAudit/'+user.id).then(res => {
			//       this.formData=res.data;
			//       this.isLoding=true;
			//       console.log(this.formData);
			//     })
			//   }
			// },
			// 重置
			reset() {
				this.$refs.form.resetFields();
				this.$refs.form.clearValidate();
			},
			// 类型
			showSexSelect() {
				this.$refs.sexSelect.open();
				this.hideKeyboard();
			},
			// 类型选择返回结果
			sexSelect(e) {
				this.onChangeName()
				this.formData.licenseType = e.name;
				// 对部分表单字段进行校验
				this.$refs.form.validateField('licenseType', err => {
					// 处理错误后的逻辑
				})
			},
			hideKeyboard() {
				uni.hideKeyboard()
			},

		}
	}
</script>

<style lang="scss" scoped>
	.title {
		background-color: #F3F4F5;
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		font-size: 32rpx;
		font-weight: bold;
		padding-left: 20rpx;
	}


	.message {
		width: 100%;
		text-align: center;
		color: red;
		height: 30px;
		line-height: 30px;
		padding: 15px;
		background-color: #F3F4F5;
		position: relative;
	}

	.message_notext {
		position: relative;
	}

	.message-img {
		width: 90px;
		height: 72px;
		position: absolute;
		top: 50%;
		left: 70%;
	}

	.foot-box {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx;
		background-color: #fff;
	}
</style>